<template>
  <div class="EditTestDataset">
    <!-- 位置信息 -->
    <div class="EditTestDataset-title">
      <div class="EditTestDataset-title-text">更新数据集</div>
      <div class="EditTestDataset-title-text"></div>
    </div>

    <div class="EditTestDataset-dialog-content">
      <el-form ref="form" label-width="110px">
        <el-row class="EditTestDataset-row">
          <el-col :span="24">
            <el-form-item label="数据集名称：">
              <div class="EditTestDataset-input">
                <el-input
                  v-model="datasetForm.dataSetName"
                  placeholder="请输入数据集名称"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="EditTestDataset-row">
          <el-col :span="24">
            <el-form-item label="数据集类型：">
              <div class="EditTestDataset-select">
                <el-select
                  v-model="datasetForm.dataSetType"
                  placeholder="请选择数据集类型"
                  disabled
                >
                  <el-option label="话音" value="1"></el-option>
                  <el-option label="数据" value="2"></el-option>
                  <el-option label="视频" value="3"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="EditTestDataset-row">
          <el-col :span="24">
            <el-form-item label="数据集描述：">
              <div class="EditTestDataset-select">
                <el-input
                  type="textarea"
                  rows="3"
                  v-model="datasetForm.remark"
                  placeholder="请输入数据集描述"
                >
                </el-input>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="fre-table saveBtn" @click="updateDataSet">更新</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditTestDataset",
  data() {
    return {
      datasetForm: {
        //使用json传输
        id: "",
        dataSetName: "", // 数据集名称
        dataSetType: "1", // 数据集类型，1：话音，2：数据，3：视频
        dataSetPath: "",
        fileName: "",
        fileSize: "",
        remark: "", // 数据集描述，非必填
      },
    };
  },
  computed: {},
  watch: {
    rowData: {
      // deep: true,
      immediate: true,
      handler(val) {
        if (val != null) {
          console.log("rowDatarowDatarowData", val);
          this.datasetForm = val;
        }
      },
    },
  },
  components: {},
  props: {
    rowData: {
      type: Object,
      default: null,
    },
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.$emit("closeDialog");
    },
    //更新
    updateDataSet() {
      this.$emit("updateDataSet", this.datasetForm);
    },
  },
  mounted() {},
};
</script>
<!-- 因为是弹窗，所以全局方法 -->
<style lang="scss" scoped>
.EditTestDataset {
  position: relative;
  width: 100%; /* 自定义弹窗宽度 */
  background: url("~@/assets/images/taskDefinition/define-background.png")
    no-repeat;
  background-size: 100% 100%;
  padding: 1.25rem;
  .EditTestDataset-title {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    color: #fff;
    font-size: 1.125rem;
    margin: 0px 0.625rem 0.625rem 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    .EditTestDataset-title-text {
      background: url("~@/assets/images/taskDefinition/vice-title.png")
        no-repeat;
      background-size: 100% 100%;
      flex: 1;
      padding-left: 1.5625rem;
    }
  }
  .EditTestDataset-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9375rem;
    .EditTestDataset-select,
    .EditTestDataset-input {
      width: 12.5rem;
      position: relative;
    }
    .EditTestDataset-row {
      margin-bottom: 10px;
    }
  }
}
.saveBtn {
  text-align: center;
  margin-top: 1.25rem;
}

.fre-table {
  width: 5.625rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  color: #fff;
  background: url("~@/assets/images/taskDefinition/btn.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.625rem;
  cursor: pointer;
}
</style>
